<template>

	<!-- 商品组 -->
	<view class="diy-goods" :style="[{'background': background }]">
		<view class="goods-list" :class="['display__'+itemStyle.display,'column__'+itemStyle.column]">
			<scroll-view :scroll-x="itemStyle.display === 'slide'">
				<view class="goods-item" v-for="(dataItem,index) in dataList" :key="index" :v-for-item="dataItem">
					<form @submit="_onTargetGoods" report-submit="true" :data-id="dataItem.goods_id">
						<button form-type="submit" class="btn-normal" >
							<!-- 单列商品 -->
							<block v-if=" itemStyle.column == 1 ">
								<view class="dis-flex">
									<!-- 商品图片 -->
									<view class="goods-item_left">
										<!-- <text>{{dataItem.image}}</text> -->
										<image class="image" :src="dataItem.image"></image>
									</view>
									<view class="goods-item_right">
										<!-- 商品名称 -->
										<view v-if=" itemStyle.show.goodsName " class="goods-item_title twolist-hidden">
											<text>{{ dataItem.goods_name }}</text>
										</view>
										<view class="goods-item_desc">
											<!-- 商品卖点 -->
											<view v-if=" itemStyle.show.sellingPoint " class="desc-selling_point dis-flex">
												<text class="onelist-hidden">{{ dataItem.selling_point }}</text>
											</view>
											<!-- 商品销量 -->
											<view v-if=" itemStyle.show.goodsSales " class="desc-goods_sales dis-flex">
												<text>已售{{ dataItem.goods_sales }}件</text>
											</view>
											<!-- 商品价格 -->
											<view class="desc_footer">
												<text v-if=" itemStyle.show.goodsPrice " class="price_x">¥{{ dataItem.goods_price }}</text>
												<text class="price_y col-9" v-if=" itemStyle.show.linePrice && dataItem.line_price > 0 ">¥{{ dataItem.line_price }}</text>
											</view>
										</view>
									</view>
								</view>
							</block>
							<!-- 多列商品 -->
							<block v-else>
								<!-- 商品图片 -->
								<view class="goods-image">
									<image class="image" mode="aspectFill" :src="dataItem.image"></image>
								</view>
								<view class="detail">
									<!-- 商品标题 -->
									<view v-if=" itemStyle.show.goodsName " class="goods-name f-28 twolist-hidden">
										{{ dataItem.goods_name }}{{dataItem.goods_id}}
									</view>
									<!-- 商品价格 -->
									<view class="detail-price onelist-hidden">
										<text v-if=" itemStyle.show.goodsPrice " class="goods-price f-30 col-m">￥{{ dataItem.goods_price }}</text>
										<text v-if=" itemStyle.show.linePrice && dataItem.line_price > 0 " class="line-price col-9 f-24">￥{{ dataItem.line_price }}</text>
									</view>
								</view>
							</block>
						</button>
					</form>
				</view>
			</scroll-view>
		</view>
	</view>
</template>


<script>
	export default {
		computed: {
			background() {
				return this.itemStyle.background;
			}
		},
		options: {
		    addGlobalClass: true,
		},
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			dataList: {}
		},
		methods: {
			/**
			 * 跳转商品详情页
			 */
			_onTargetGoods(e) {
				// 记录formid
				this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '/pages/goods/index?goods_id=' + e.mp.target.dataset.id,
				});
			},
		}
	}
</script>

<style>
	/* common.wxss */

	/* @import "/utils/common.wxss"; */

	/* 商品组 */

	.diy-goods .goods-list {
		padding: 4upx;
		box-sizing: border-box;
	}

	.diy-goods .goods-list .goods-item {
		box-sizing: border-box;
		padding: 6upx;
	}

	.diy-goods .goods-list.display__slide {
		white-space: nowrap;
		font-size: 0;
	}

	.diy-goods .goods-list.display__slide .goods-item {
		display: inline-block;
	}

	.diy-goods .goods-list.display__list .goods-item {
		float: left;
	}

	.diy-goods .goods-list.column__2 .goods-item {
		width: 50%;
	}

	.diy-goods .goods-list.column__3 .goods-item {
		width: 33.33333%;
	}

	.diy-goods .goods-list .goods-item .goods-image {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		overflow: hidden;
		background: #fff;
	}

	.diy-goods .goods-list .goods-item .goods-image:after {
		content: '';
		display: block;
		margin-top: 100%;
		/* margin 百分比相对父元素宽度计算 */
	}

	.diy-goods .goods-list .goods-item .goods-image .image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.diy-goods .goods-list .goods-item .detail {
		padding: 8upx;
		background: #fff;
	}

	.diy-goods .goods-list .goods-item .detail .goods-name {
		height: 72upx;
		line-height: 1.3;
		white-space: normal;
	}

	.diy-goods .goods-list .goods-item .detail .detail-price .goods-price {
		margin-right: 8upx;
	}

	.diy-goods .goods-list .goods-item .detail .detail-price .line-price {
		text-decoration: line-through;
	}

	/* 单列商品 */

	.diy-goods .goods-list.column__1 .goods-item {
		width: 100%;
		height: 280upx;
		margin-bottom: 12upx;
		padding: 20upx;
		box-sizing: border-box;
		background: #fff;
	}

	.diy-goods .goods-list.column__1 .goods-item {
		line-height: 1.6;
	}

	.diy-goods .goods-list.column__1 .goods-item:last-child {
		margin-bottom: 0;
	}

	.diy-goods .goods-list.column__1 .goods-item_left {
		display: flex;
		width: 40%;
		background: #fff;
		align-items: center;
	}

	.diy-goods .goods-list.column__1 .goods-item_left .image {
		display: block;
		width: 240upx;
		height: 240upx;
	}

	.diy-goods .goods-list.column__1 .goods-item_right {
		position: relative;
		width: 60%;
	}

	.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
		height: 72upx;
		margin-top: 20upx;
		font-size: 28upx;
		color: #333;
	}

	.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
		line-height: 1.3;
	}

	.diy-goods .goods-list.column__1 .goods-item_desc {
		margin-top: 8upx;
	}

	.diy-goods .goods-list.column__1 .desc-selling_point {
		width: 400upx;
		/* height: 40upx; */
		font-size: 24upx;
		color: #ff495e;
	}

	.diy-goods .goods-list.column__1 .desc-goods_sales {
		color: #999;
		font-size: 24upx;
	}

	.diy-goods .goods-list.column__1 .desc_footer {
		font-size: 24upx;
	}

	.diy-goods .goods-list.column__1 .desc_footer .price_x {
		margin-right: 16upx;
		color: #f03c3c;
		font-size: 30upx;
	}

	.diy-goods .goods-list.column__1 .desc_footer .price_y {
		text-decoration: line-through;
	}
</style>
